<!doctype html>
<html lang="en">
<head>
  <!--
    Demo by Ildar Sagdejev ( http://twitter.com/tknomad )
  -->
  <meta charset="UTF-8">
  <title>360度藏品展示</title>
  <link rel="stylesheet" href="css/common.css">
  <style>
  
  
    a {
      color: #da2020;
      font-family:"SimHei";
    }
    a:hover {
      color: #d6f300;
    }
    .wrap > h1 {
      margin: 26px auto;
    }
    #showcase img{
    	/*width:300px;*/
    	border: 10px solid;
    }
    #showcase {
      margin-top:10%;
      height: 500px;
      background-image:url("images/thumbnailsBackground.jpg");
      background-repeat:repeat-x;
      -webkit-box-shadow: 0px 0px 13px 5px #DB1242;
      -moz-box-shadow: 0px 0px 13px 5px #DB1242;
      box-shadow: 0px 0px 13px 5px #DB1242;
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      border-radius: 8px;
    }
    #item-title {
      color: #F31414;
      font-size: 29px;
      letter-spacing: 0.13em;
      text-shadow: 1px 1px 6px #C72B2B;
      text-align: center;
      margin-top: 30px;
      margin-bottom: 22px;
    }
    #nav {
      text-align: center;
    }
    #nav > button {
      width: 64px;
      height: 36px;
      color: #666;
      font: bold 16px arial;
      text-align: center;
      margin: 5px;
      text-shadow: 0px 1px 0px #f5f5f5;
      background: #f6f6f6;
      border: solid 2px rgba(0, 0, 0, 0.4);
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      -webkit-box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.4);
      -moz-box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.4);
      box-shadow: 0 0 9px 1px rgba(0, 0, 0, 0.4);
      cursor: pointer;
    }
    #nav > button:active,
    #nav > button.down {
      background: #dfdfdf;
      border: solid 2px rgba(0, 0, 0, 0.6);
      box-shadow: none;
    }
    #share {
      top: -9px;
    }
    #credits {
      top: -15px;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div id="showcase" class="noselect">
    </div>
    <footer>
      <p id="item-title"><a id="item_title_a" target="_dzf" href="../dz/d0.html?pic=04920&fmt=jpg&width=5760&height=3840&size=512">&nbsp;</a></p>
      <div id="nav" class="noselect">
        <button class="left">
          ←
        </button>
        <button class="start">
          播放
        </button>
        <button class="stop">
          停止
        </button>
        <button class="right">
          →
        </button>
        <button class="more">
          更多
        </button>
      </div>
    </footer>
  </div>
  <script src="js/lib/jquery-1.9.1.js"></script>
  <script src="js/lib/jquery.reflection.js"></script>
  <script src="js/lib/jquery.cloud9carousel.js"></script>
  <script src="pics.js"></script>
  <script>
  var timer_play;
  function getsrc(p){
	  //return "http://www.hzacm.com/dz/pic/"+p.sn+"_512/"+p.sn+"_01_files/9/0_0.jpg";
	  //return "../dz/pic/04920_512/04920_01_files/9/0_0.jpg";	 
	  return "http://www.hzacm.com/dz/pic/png/"+p.sn+".png";
  }
  $(document).ready(function() {
      var pic_len = pics.length;
      
      for(var i=0; i<8; i++){
    	  var p = pics[i];
    	  var img =  new Image();
    	  $(img).addClass("cloud9-item").attr({
    		  "src":getsrc(p),
    		  "alt":p.name,
    		  'pos':i
    	  });
    	  $("#showcase").append(img);
      }
      
      var img_total=pics.length;
      var showcase = $("#showcase"), title = $('#item_title_a')
  	  var crl;
      var margin_top = Math.floor($( window ).height()*0.15)-50;
      showcase.css('margin-top',margin_top+'px')  
        showcase.Cloud9Carousel( {
          yOrigin: 42,
          yRadius: 80,
          farScale:0.1,
          yOrigin:50,
          mirror: {
            gap: 12,
            height: 0.2
          },
          buttonLeft: $("#nav > .left"),
          buttonRight: $("#nav > .right"),
          autoPlay: 0,
          speed:10,
          bringToFront: true,
          onRendered: rendered,
          onLoaded: function(carousel) {
            crl = carousel;
            showcase.css( 'visibility', 'visible' )
            showcase.css( 'display', 'none' )
            showcase.fadeIn( 1500 )
          }
        } )

      function rendered( carousel ) {
        if(carousel.pos == undefined){
        	carousel.pos=carousel.items.length;
        }        
    	var item =  carousel.nearestItem();
    	var it_near = carousel.nearestIndex();
    	var len = carousel.items.length;
    	for(var i=0; i<2; i++){
        	var it_far = it_near+4+i;
        	if(it_far>=len)
        		it_far-=len;
        	var item_far = carousel.items[it_far];
        	//rendered item, repalce it with another img el
        	if(item_far.rendered){
        		carousel.pos++;
        		if(carousel.pos>=img_total)
        			carousel.pos=0;
        		var p = pics[carousel.pos];
        		carousel.replaceItem(it_far,{
          		  "src":getsrc(p),
        		  "alt":p.name,
        		  'pos':carousel.pos
        		});
        	}
    	}
    	
    	item.rendered=true;
    	
    	var pos = $(item.element).find("img").attr('pos');
    	var p = pics[pos];
        title.text( item.element.alt );
        if(item.element.alt.indexOf(p.sn)==-1){
        	console.log(p.sn);
        }
        title.attr('href',"http://www.hzacm.com/dz/d0.html?pic="+p.sn+"&fmt=jpg&width="+p.width+"&height="+p.height+"&size=512");

        // Fade in based on proximity of the item
        var c = Math.cos((carousel.floatIndex() % 1) * 2 * Math.PI)
        title.css('opacity', 0.5 + (0.5 * c))
      }

      $('#nav > .start').click( function( e ) {
      	 if(timer_play)
      		clearInterval(timer_play);
      	  crl.go( 1 );  
    	  timer_play = setInterval(function(){
	            crl.go( 1 );        		
	    	},2000);

        } )
      
      $('#nav > .stop').click( function( e ) {
    	if(timer_play){
      		clearInterval(timer_play);
      		timer_play=null;
    	}
        } )

       $('#nav > .more').click( function( e ) {
    		window.location.href = "wf/c1.html";
        } )

      //
      // Simulate physical button click effect
      //
      $('#nav > button').click( function( e ) {
        var b = $(e.target).addClass( 'down' )
        setTimeout( function() { b.removeClass( 'down' ) }, 80 )
      } )

      $(document).keydown( function( e ) {
        //
        // More codes: http://www.javascripter.net/faq/keycodes.htm
        //
        switch( e.keyCode ) {
          /* left arrow */
          case 37:
            $('#nav > .left').click()
            break

          /* right arrow */
          case 39:
            $('#nav > .right').click()
        }
      } )
    })
  </script>
</body>
</html>
